import { App, createVNode, VNode, render } from "vue";


import Loading from './index.vue'

// 需要在 main.ts 里use一下
export default {
    install(app: App) { 
        console.log(app);     // vue实例
        
        console.log(Loading);   // 这时是一个模块

        // 需要创建虚拟dom
        const vnode: VNode = createVNode(Loading)  // 创建好虚拟dom
        // console.log(vnode);                       // 里面的component是null ，还用不了
        // 创建真实dom
        render(vnode, document.body)              // 第二个参数是 挂载点， 挂载到body 上
        console.log(vnode);                       // 里面的component有值了， 挂载完毕, component里面setupState能打印出来有值，但用不了
        
        // 另一套方案，使用暴露出来的 exposed 
        console.log(vnode.component?.exposed);
        
        // 使用全局挂载
        app.config.globalProperties.$loading = {
            show: vnode.component?.exposed?.show,
            hide: vnode.component?.exposed?.hide
        }

        // 测试
        // app.config.globalProperties.$loading.show()
    }
}